<template>
  <div class="guodeSearch-wrapper">
    <el-row :gutter="6">
      <div v-for="(item,itemIndex) in searchList" :key="itemIndex">
        <div class="item">
          <span v-if="item.label">{{item.label}}</span>
          <component v-if="item.options" :is="item.component" v-model="form[item.prop]" :size="size" v-bind="item" :options="item.options" />
          <component v-else :is="item.component" v-model="form[item.prop]" :size="size" v-bind="item" />
        </div>
      </div>
      <div v-if="!hideButton" class="item">
        <el-button type="primary" icon="el-icon-search" :size="size" @click="handleSubmit">搜索</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>
const COMPONENT_NAME = 'guodeSearch'
import guodeSelect from '../../select/src/select.vue'
export default {
  name: COMPONENT_NAME,
  components: {
    guodeSelect,
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  props: {
    form: {
      type: Object,
    },
    option: {
      type: [Array],
    },
    size: {
      type: String,
      default: 'small',
    },
    hideButton: Boolean,
    defaultSearch: {
      type: Object,
      default: () => {
        return {
          'el-datePicker': { type: 'daterange', rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期' },
        }
      },
    },
  },
  computed: {
    searchList() {
      const items = this.option
      this.option.forEach((item) => {
        const defaultItem = this.defaultSearch[item.component]
        if (defaultItem) {
          Object.assign(defaultItem, item)
          Object.assign(item, defaultItem)
        }
      })
      return items
    },
  },
  methods: {
    handleSubmit() {
      this.$emit('search')
    },
    inputChange(e) {
      console.log('========>:', e.target)
    },
  },
}
</script>
<style lang="scss" scoped>
.guodeSearch-wrapper {
  font-size: 14px;
  .item {
    display: flex;
    align-items: center;
    margin: 3px 6px 3px 0px;
    > span {
      display: inline-block;
      min-width: 80px;
      text-align: right;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }
  .el-row {
    margin: 1px !important;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
